<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
        <view class="container" style='background-color: #fff; padding-bottom: 50upx;'>
		    <view class="swiper">
				<block v-if="detail.is_video == 0">
					<swiper autoplay="true" @change="swiperChange">
						<block v-for="(it, k1) in detail.lunimgs" :key="k1">
							<swiper-item>
								<image :src="it" class="slide-image" mode="widthFix" lazy-load="true"/>
							</swiper-item>
						</block>
					</swiper>
					<!--重置小圆点的样式  -->
					<view class="dots">  
						<block v-for="(it, k2) in detail.lunimgs" :key="k2">  
							<view :class="['dot', k2 === currentSwiper ? 'active' : '']"></view>  
						</block>
					</view>
				</block>
				<block v-else>
					<video :src="detail.PlayURL" id="video" :poster="detail.CoverURL" show-center-play-btn="true" objectFit="fill" controls></video>
				</block>
		    </view>
			<!-- 详情 -->
		    <view class='detail-cont'>
				<rich-text :nodes="detail.content"></rich-text>
		    </view>
		</view>
		<view class="nomore"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>已经到底了，没有内容了~</text></view>
		<scope-box :isLogin="isLogin" @isShow="isShow"></scope-box>
	</view>
</template>

<script>
	import app from '../../common/index.js';
	export default {
		data() {
			return {
				title: '案例详情',
				navH: null,
				userInfo: {},
				isLogin: false,
				caseId: '',  // 案例ID
				currentSwiper: 0,  // 当前item-id
				detail: {},
				hasRes: true,
				total: 333,
			}
		},
		onLoad(options) {
			this.navH = this.$store.state.navHeight;
			this.caseId = options.id;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			if(!!this.userInfo.id) {
				this.isLogin = false;
			}
			this.getDetail();
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getDetail();
			uni.stopPullDownRefresh();
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: '名医案例详情',
				path: 'pages/casedetail/index?id='+ this.caseId,
			}
		},
		methods: {
			/**
			 * @des 登录提示框
			 */
			isShow() {
				this.isLogin = false;
			},
			/**
			 * @des 获取案例详情
			 */
			getDetail() {
				app.request({
					url: 'entry/wxapp/DoctorCaseDetail',
					data: {
						id: this.caseId,
						user_id: this.userInfo.id,
					}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					this.detail = d;
				})
			},
			/**
			 * @alias 
			 */
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
		}
	}
</script>

<style>
	.swiper {position: relative; width: 100%;}
	swiper {height: 725upx; overflow: hidden;}
	video {width: 100%; margin-bottom: -40upx;}
	.dots {display: flex; flex-direction: center; position: absolute; left: 50%; transform: translateX(-50%); padding: 30upx 0;}
	/*未选中时的小圆点样式 */
	.dot {width: 18upx; height: 18upx; border-radius: 100%; margin-right: 15upx; background-color: rgba(0,0,0,.1);}
	/*选中以后的小圆点样式  */
	.active {width: 18upx; height: 18upx; background-color: #82d7d0;}
	
</style>
